<template>
   <!-- <div style="height: 100%;width: 100%">
        <div style="height: 10%">sss</div>-->
        <div ref="chart" id="panel-details" class="panel-details" :style="[backgroundColorURL]"></div>
    <!--</div>-->

</template>

<script>
import util from 'util'

export default {
    /**
     * @author zhangyuntao
     * @description ECharts drawing component echarts图表绘制组件
     */
    name: "EchartsPanel",

    props: {
        graphOptions: {
            required: true,
            type: Object
        },
    },

    watch: {
        graphOptions: {
            deep: true,
            handler: function(val,old) {
              console.log('change->graphOptions:')
              console.log(JSON.stringify(val))
                //options重复监听  连续设置echarts   报错
                if(JSON.stringify(val) != this.oldOptions){
                    var old =JSON.parse(this.oldOptions);
                    var theme ='';
                    if(old.theme!=val.theme || (old.dataset !=null && !(old.dataset instanceof Array) && old.dataset.source==null)){
                        if(!((old.theme==null || old.theme=='default') && val.theme=='default')){
                            theme=val.theme;
                        }
                    }
                    // 背景图片的设置
                    this.backgroundColorURL = val.backgroundColorURL
                    this.oldOptions =JSON.stringify(val);
                    setTimeout(()=>{
                        try {
                            if((val.dataset.source !=null  && val.dataset.source .length>0 )||
                                (val.dataset instanceof Array && val.dataset.length>0 && val.dataset[0].source!=null)){

                                //修改主题
                                if(theme !=null && theme!=''  ){
                                    console.log('修改主题',theme)
                                    this.chart.dispose();
                                    this.chart =  echarts.init(this.$refs.chart,theme);
                                }
                                if(this.backgroundColorURL != null && this.backgroundColorURL !== ''){
                                  console.log('添加背景图片',this.backgroundColorURL)
                                  this.$refs.chart.style.background = 'url(' + this.backgroundColorURL + ') no-repeat'
                                  this.$refs.chart.style.backgroundSize = '100% 100%'
                                } else {
                                  this.$refs.chart.style.background = 'none'
                                }
                                this.chart.setOption(val,true);
                            }
                        } catch (error) {
                            console.error(error)
                            this.chart.dispose();
                            if(val.theme!=null && val.theme!='default'){
                                this.chart =  echarts.init(this.$refs.chart,val.theme);
                            }else{
                                this.chart =  echarts.init(this.$refs.chart);
                            }
                            if(this.backgroundColorURL == null && this.backgroundColorURL === ''){
                              this.$refs.chart.style.background = ''
                              this.$refs.chart.style.backgroundSize = ''
                            }

                        }

                    },200)
                }

            }
        }
    },
    computed: {

    },

    data () {
        return {
            oldOptions:'{}',
            chartStyle: {},
            chart: null,
            dataOption: {},
            backgroundColorURL: ''
        }
    },

    methods: {
        //init不再初始化  保存的图表没有数据的时候会异常
        init() {
            if (this.chart != null && this.chart != "" && this.chart != undefined) {
               this.chart.dispose();
            }
            if (this.chart === null) {
                this.chart =  echarts.init(this.$refs.chart);
                if(this.graphOptions.theme!=null && this.graphOptions.theme!='defult'){
                    this.chart =  echarts.init(this.$refs.chart,this.graphOptions.theme);
                }else{
                    this.chart =  echarts.init(this.$refs.chart);
                }
            }else{

            }
            // this.chart.setOption(this.graphOptions);
        },
        resize() {
            this.chart.resize();
        },
        refresh() {
            this.chart.setOption(this.graphOptions);
        },

        getDataURL() {
            try {
                return this.chart.getDataURL({pixelRatio:0.4});
            } catch (error) {
                return null;
            }

        }
    },

    mounted() {
        this.init();
    }
}
</script>
<style lang="less">
.panel-details{
    width: 100%;
    height: 100%;
    // background-size: 100% 100%;
}
</style>

